<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./popmotion.js"></script>
    <style>
        body {
            margin: 0;
        }
        #canvas {
            margin: 0;
        }
        .outerWrap {
            border: 1px solid;
            border-radius: 50%;
            width: 400px;
            height: 400px;
            padding: 10px;
        }
        .innerWrap {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="outerWrap">
        <div class="innerWrap">
            <canvas id="canvas" width="400px" height="400px"></canvas>
        </div>
    </div>
   
    
</body>
<script>
    let { tween, easing } = popmotion
    let width = 400, height = 400
    let canvas = document.getElementById("canvas")
    canvas.width = width
    canvas.height = height
    let ctx = canvas.getContext("2d")
    let waveAnimateTimer = null

    ctx.fillRect(0, 0, width, height)

    // 基础属性
    let radius = 100 // 绘制圆的大小
    let totalCount = 100 // 总值

    
    console.log(easing)
    
    // drawWater(0)
    waveAnimate()

    function drawBaseCircle() {
        ctx.beginPath()
        ctx.fillStyle="#fff"
        ctx.arc(0, 0, radius, 0, 2*Math.PI)
        
        ctx.fill()
    }

    function drawWater(x) {
        ctx.beginPath()
        ctx.strokeStyle = '#00f'
       
        ctx.moveTo(0, 200)

        for(let i = 0;i < width;i += 5) {
            ctx.lineTo(i, 200 + radius * 0.1 * Math.sin(Math.PI*2 * (i / width)*1 + x))
        }
      
        ctx.lineTo(width, height)
        ctx.lineTo(0, height)
        ctx.lineTo(0, 200)
        ctx.fillStyle="#00f"
        ctx.fill()
        ctx.stroke()
        ctx.fillStyle="#000"
    }

    function waveAnimate() {
        tween({
            from: {
                x: 0
            },
            to: {
                x: Math.PI*2
            },
            // ease: easing.easeInOut,
            ease: easing.linear,
            duration: 1000,
        }).start({
            update: o => {
             
                
                // ctx.clearRect(0, 0, width, height)
                ctx.fillRect(0, 0, width, height)
                drawWater(o.x)
            },
            complete: () => {
              
                waveAnimate()
            }
        })
        
    }

    function getWaterHeight(total, count, radius) {
        return -radius + (count/total) * radius * 2 
    }
</script>
</html>